<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<style>
  .fixed-table-pagination {
    display: none !important;
  }
</style>
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">最新数据</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a th:href="@{../admin}">首页</a></li>
          <li class="breadcrumb-item active">连接管理</li>
          <li class="breadcrumb-item active">最新数据</li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
  <div class="card card-info">
    <div style="padding: 16px">
      <span>最新50条采集数据</span>
    </div>
  </div>
  <div class="card card-body" id="tableCard">
    <table class="table-sm" id="table"></table>
  </div>
</section>

<script>
  $(function () {
    var columns = [
      {
        title: '序号',
        field: '',
        align: 'center',
        formatter: function (value, row, index) {
          var pageSize = $('#table').bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
          var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
          return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
        }
      },
      {
        field: 'indicatorId',
        title: '指标id',
        align: "center"
      }, {
        field: 'collectTime',
        title: '采集时间',
        align: "center",
      }, {
        field: 'value',
        title: '采集值',
        align: "left",
      }];

    var options = {
      id: "#table",
      url: '/col/collect/getLatestCollectData',
      columns: columns,
      toolbar: '#toolbar',
      showRefresh: true,
      pageSize: 50,
    }
    Core.initTable(options);

    function refreshTable() {
      Core.refreshTable("#table")
    }

    // 查询
    $('#searchForm').submit(function (event) {
      event.preventDefault();
      event.stopPropagation();
      refreshTable();
    })
  });

</script>